<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>评论编辑</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            width: 100vw;
            min-height: 100vh;
            background: #fff;
            box-shadow: none;
            border-radius: 0;
            padding: 48px 0 0 0;
            display: block;
        }
        .form-wrap {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 32px 32px 24px 32px;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        h2#formTitle {
            margin-bottom: 32px;
            font-size: 28px;
            color: #222;
            font-weight: 700;
            letter-spacing: 2px;
            text-align: left;
        }
        .form-row {
            margin-bottom: 22px;
            width: 100%;
            display: flex;
            align-items: center;
        }
        .form-row label {
            width: 90px;
            color: #444;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
        }
        .form-row input, .form-row select, .form-row textarea {
            flex: 1;
            padding: 10px 14px;
            border: 1.5px solid #e0e6ed;
            border-radius: 8px;
            font-size: 16px;
            background: #f8fafc;
            transition: border 0.2s;
        }
        .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
            border-color: #1890ff;
            outline: none;
            background: #fff;
        }
        .form-row textarea {
            resize: vertical;
            min-height: 70px;
            max-height: 180px;
        }
        .form-row .radio-group {
            display: flex;
            gap: 32px;
            padding-left: 6px;
        }
        .form-row .radio-group label {
            width: auto;
            font-weight: normal;
            font-size: 15px;
            color: #555;
        }
        .form-actions {
            text-align: left;
            margin-top: 36px;
            width: 100%;
        }
        .form-actions button {
            padding: 9px 32px;
            border: none;
            border-radius: 22px;
            font-size: 16px;
            margin: 0 10px 0 0;
            cursor: pointer;
            background: #1890ff;
            color: #fff;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(24,144,255,0.08);
            transition: background 0.2s, box-shadow 0.2s;
        }
        .form-actions button:hover {
            background: #40a9ff;
            box-shadow: 0 4px 16px rgba(24,144,255,0.13);
        }
        .form-actions .reset-btn {
            background: #fff;
            color: #1890ff;
            border: 1.5px solid #1890ff;
            box-shadow: none;
        }
        .form-actions .reset-btn:hover {
            background: #e6f7ff;
        }
        .form-actions .back-btn {
            background: #aaa;
            color: #fff;
            border: none;
        }
        .form-actions .back-btn:hover {
            background: #888;
        }
        @media (max-width: 800px) {
            .form-wrap { max-width: 98vw; padding: 18px 2vw 18px 2vw; }
            .form-row label { width: 80px; font-size: 15px; }
            .form-actions button { padding: 8px 18px; font-size: 15px; margin: 0 4px 0 0; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form-wrap">
        <h2 id="formTitle">新增评论</h2>
        <form id="commentForm" autocomplete="off">
            <div class="form-row">
                <label for="userId">用户ID</label>
                <input type="text" id="userId" name="userId" required placeholder="请输入用户ID">
            </div>
            <div class="form-row">
                <label for="scenicSpot">景点</label>
                <select id="scenicSpot" name="scenicSpot" required style="color:#bdbdbd;">
                    <option value="" disabled selected>请选择景点</option>
                </select>
            </div>
            <div class="form-row">
                <label for="content">评论内容</label>
                <textarea id="content" name="content" required maxlength="500" placeholder="请输入评论内容，最多500字"></textarea>
            </div>
            <div class="form-row">
                <label for="createTime">创建时间</label>
                <input type="datetime-local" id="createTime" name="createTime">
            </div>
            <div class="form-row">
                <label>状态</label>
                <div class="radio-group">
                    <label><input type="radio" name="status" value="正常" checked> 正常</label>
                    <label><input type="radio" name="status" value="屏蔽"> 屏蔽</label>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit">提交</button>
                <button type="reset" class="reset-btn">重置</button>
                <button type="button" class="back-btn" onclick="window.location.href='manage.html'">返回列表</button>
            </div>
        </form>
    </div>
</div>
<script>
// 判断是否为编辑
function getQueryParam(name) {
    var match = window.location.search.match(new RegExp('(?:[?&])' + name + '=([^&]*)'));
    return match ? decodeURIComponent(match[1]) : null;
}
var commentId = getQueryParam('id');
function loadScenicOptions(selected) {
    fetch('/api/exampleRoute', { method: 'GET' })
        .then(res => res.json())
        .then(data => {
            const scenicSet = new Set();
            data.forEach(item => { if(item.scenic) scenicSet.add(item.scenic); });
            const select = document.getElementById('scenicSpot');
            select.innerHTML = '<option value="" disabled selected>请选择景点</option>';
            Array.from(scenicSet).forEach(name => {
                const opt = document.createElement('option');
                opt.value = name;
                opt.textContent = name;
                opt.style.color = '#333';
                if(selected && selected === name) opt.selected = true;
                select.appendChild(opt);
            });
            select.style.color = select.value ? '#333' : '#bdbdbd';
            select.onchange = function() { this.style.color = '#333'; };
        });
}
function fillCommentForm(data) {
    document.getElementById('userId').value = data.userId || '';
    loadScenicOptions(data.scenicSpot || '');
    document.getElementById('content').value = data.content || '';
    if (data.createTime) {
        var dt = data.createTime.replace(' ', 'T');
        document.getElementById('createTime').value = dt;
    }
    if (data.status) {
        var radios = document.getElementsByName('status');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].value === data.status) radios[i].checked = true;
        }
    }
}
if (!commentId) loadScenicOptions();
if (commentId) {
    document.getElementById('formTitle').innerText = '编辑评论';
    // 确保表单渲染后再填充数据
    window.addEventListener('DOMContentLoaded', function() {
        fetch('/api/commentNew/' + commentId, { method: 'GET' })
            .then(response => response.json())
            .then(data => { if (data) fillCommentForm(data); });
    });
}
// 工具函数：将 '2025-06-15T22:55' 转为 '2025-06-15 22:55:00'
function formatDateTime(val) {
    if (!val) return '';
    var parts = val.split('T');
    if (parts.length === 2) {
        var date = parts[0];
        var time = parts[1].length === 5 ? parts[1] + ':00' : parts[1];
        return date + ' ' + time;
    }
    return val;
}
// 表单提交
 document.getElementById('commentForm').onsubmit = function(e) {
    e.preventDefault();
    var comment = {
        userId: document.getElementById('userId').value.trim(),
        scenicSpot: document.getElementById('scenicSpot').value,
        content: document.getElementById('content').value.trim(),
        createTime: formatDateTime(document.getElementById('createTime').value),
        status: document.querySelector('input[name="status"]:checked').value
    };
    var url = '/api/commentNew' + (commentId ? '' : '');
    var method = commentId ? 'PUT' : 'POST';
    if (commentId) comment.id = commentId;
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(comment)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('操作成功');
            window.location.href = 'manage.html';
        } else {
            alert(data.message || '操作失败');
        }
    });
};

function renderTable(data) {
    let html = '';
    data.forEach((item, idx) => {
        html += `
        <tr>
            <td><input type="checkbox" value="${item.id}"></td>
            <td>${idx + 1}</td>
            <td>${item.scenicSpotName || ''}</td>
            <td>${item.scenicSpotLocation || ''}</td>
            <td>${item.buyDate ? item.buyDate.split('T')[0] : ''}</td>
            <td>${item.status}</td>
            <td>
                <button class="btn btn-danger" onclick="deleteOrder(${item.id})">删除</button>
            </td>
        </tr>
        `;
    });
    $('#orderTableBody').html(html);
}
</script>
</body>
</html> 